/*
  学习目标：React生命周期-更新阶段
  三大阶段：挂载时、更新时、卸载时
  挂载时 等同于Vue中的创建和挂载二合一
  componentDidUpdate 更新阶段钩子函数
  注意：
    1. 更新阶段的钩子函数中，不能调用setState会造成死循环
    2. React中的更新指的是数据更新
 */

import React from 'react';
import ReactDom from 'react-dom/client';

class Handler extends React.Component {
  state = {
    count: 10000,
  };

  render() {
    // console.log('渲染前----->');
    return (
      <div>
        <h3>{this.state.count}</h3>
        <button
          onClick={() => this.setState({ count: this.state.count + 1000 })}
        >
          点我修改
        </button>
        <Child count={this.state.count}></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    console.log('render触发，重新渲染页面----->');
    return <div>子组件</div>;
  }
  componentDidUpdate() {
    console.log('componentDidUpdate触发----->');
  }
}

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
